.gsuite-purchase-cta__product-logo {
	color: #757575;
	font-size: 150%;

	@include breakpoint( '<660px' ) {
		width: 236px;
	}

	@include breakpoint( '>660px' ) {
		float: left;
	}

	strong {
		background: url( '/calypso/images/upgrades/g-suite-logo.png' ) no-repeat left;
		background-size: 73px;
		background-position-y: 5px;
		display: inline-block;
		height: 32px;
		margin: 0 6px 0 0;
		text-indent: -999999px;
		vertical-align: text-top;
		width: 73px;
	}
}

.gsuite-purchase-cta__header {
	display: flex;
	flex-direction: row;
}

.gsuite-purchase-cta__header-description {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-size: 14px;

	@include breakpoint( '>1040px' ) {
		flex-basis: 100%;
		max-width: 410px;
	}
}

.gsuite-purchase-cta__header-description-title {
	color: var( --color-text );
	font-size: 24px;
	line-height: 120%;
	margin: 0 0 10px;
}

.gsuite-purchase-cta__header-description-sub-title {
	font-size: 18px;
}

.gsuite-purchase-cta__header-image {
	display: none;

	@include breakpoint( '>1040px' ) {
		align-items: center;
		display: flex;
		flex-grow: 1;
		justify-content: center;
		margin-left: 20px;
	}
}

.gsuite-purchase-cta__skus {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;

	@include breakpoint( '>660px' ) {
		flex-direction: row;
	}

	@include breakpoint( '>1040px' ) {
		justify-content: space-between;
	}
}

.gsuite-purchase-cta__sku-info {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;

	&:only-child {
		margin-left: 0;
		margin-right: 0;
	}
}

.gsuite-purchase-cta__sku-info-name-area {
	h3 {
		color: #757575;
		font-size: 150%;
	}
}

.gsuite-purchase-cta__sku-info-storage-area {
	display: flex;
	flex-direction: row;
	// the InfoPopover will try to make this div bigger when it is rendered
	// we want them to always be the same size for when they appear side-by-side
	height: 19.5px;

	h5 {
		color: var( --color-text-subtle );
		font-size: 13px;
		font-style: normal;
	}

	.info-popover {
		margin-left: 3px;
	}
}

.gsuite-purchase-cta__get-gsuite-button {
	float: none;
	margin: 1em 0 0.5em;
	padding-left: 2em;
	padding-right: 2em;

	@include breakpoint( '<480px' ) {
		width: 100%;
	}
}

.gsuite-purchase-cta__info .gsuite-learn-more {
	@include breakpoint( '>960px' ) {
		text-align: center;
	}
}
